<template>
	<div ref="container">
		<pro-layout
			:menus="menus"
			:collapsed="collapsed"
			:mediaQuery="query"
			:isMobile="isMobile"
			:handleMediaQuery="handleMediaQuery"
			:handleCollapse="handleCollapse"
			:i18nRender="i18nRender"
			:siderWidth="220"
			v-bind="settings"
		>
			<a-layout-content class="h-full">
				<multi-tab v-if="multiTab"></multi-tab>
				<transition name="page-transition">
					<router-view />
				</transition>
			</a-layout-content>
			<!-- 1.0.0+ 版本 pro-layout 提供 API，
          我们推荐使用这种方式进行 LOGO 和 title 自定义
      -->
			<template v-slot:menuHeaderRender>
				<div>
					<img src="~@/assets/logo.png" style="border-radius: 25px" />
					<h1
						style="
							font-family: bmwTypeGlobalRegularBold,
								bmwTypeGlobalRegular;
						"
					>
						{{ $t('gtitle') }}
					</h1>
				</div>
			</template>
			<template v-slot:menuRender>
				<div>
					<!--    mode 改这个值就能切换  horizontal    -->
					<a-menu
						:defaultSelectedKeys="[keys]"
						mode="inline"
						:inline-collapsed="collapsed"
						@click="menuClick"
						:selectedKeys="selectedKeys"
					>
						<template v-for="item in menus">
							<a-menu-item v-if="item.meta" :key="item.path" style="width: 120px">

								<!-- <a-badge v-if="item.meta.i18n === 'menu.dgp' && taskNum > 0"  :count="taskNum"> -->
								<a-badge v-if="item.meta.i18n === 'menu.dgp' && taskNum > 0"  :dot="true">
									<a-icon :type="item.meta.icon" />
									<span>{{
											item.meta.i18n
												? $t(item.meta.i18n)
												: item.meta.title
									}}</span>
								</a-badge>


								<div v-else>
									<a-icon :type="item.meta.icon" />
									<span>{{
										item.meta.i18n
											? $t(item.meta.i18n)
											: item.meta.title
									}}</span>
								</div>
							</a-menu-item>
						</template>
					</a-menu>
				</div>
			</template>
			<!-- 1.0.0+ 版本 pro-layout 提供 API,
          增加 Header 左侧内容区自定义
      -->
			<template v-slot:headerContentRender>
				<div></div>
			</template>

			<!-- <setting-drawer v-if="isDev" :settings="settings" @change="handleSettingChange">
      <div style="margin: 12px 0;"></div>
      </setting-drawer>-->
			<template v-slot:rightContentRender>
				<right-content
					:top-menu="settings.layout === 'topmenu'"
					:is-mobile="isMobile"
					:theme="settings.theme"
				/>
			</template>
			<!-- custom footer / 自定义Footer -->
			<template v-slot:footerRender>
				<global-footer />
			</template>
		</pro-layout>
	</div>
</template>

<script>
// import { SettingDrawer, updateTheme } from '@ant-design-vue/pro-layout'
import { MultiTab } from '@/components'
import { i18nRender } from '@/locales'
import { mapState } from 'vuex'
import {
	CONTENT_WIDTH_TYPE,
	SIDEBAR_TYPE,
	TOGGLE_MOBILE_TYPE,
} from '@/store/mutation-types'

import defaultSettings from '@/core/defaultSettings'
import RightContent from '@/components/GlobalHeader/RightContent'
import GlobalFooter from '@/components/GlobalFooter'
import watemarkMixin from '@/mixins/watemark-mixin'
import { taskListNew } from "@/api/ytdg";
import { getUserInfo } from "@/api/index";

export default {
	name: 'BasicLayout',
	mixins: [watemarkMixin],
	components: {
		// SettingDrawer,
		RightContent,
		GlobalFooter,
		MultiTab,
	},
	data() {
		return {
			// preview.pro.antdv.com only use.
			isProPreviewSite:
				process.env.VUE_APP_PREVIEW === 'true' &&
				process.env.NODE_ENV !== 'development',
			// end
			isDev:
				process.env.NODE_ENV === 'development' ||
				process.env.VUE_APP_PREVIEW === 'true',
			multiTab: defaultSettings.multiTab,
			// base
			menus: [],
			// 侧栏收起状态
			collapsed: false,
			title: defaultSettings.title,
			settings: {
				// 布局类型
				layout: defaultSettings.layout, // 'sidemenu', 'topmenu'
				// CONTENT_WIDTH_TYPE
				contentWidth:
					defaultSettings.layout === 'sidemenu'
						? CONTENT_WIDTH_TYPE.Fluid
						: defaultSettings.contentWidth,
				// 主题 'dark' | 'light'
				theme: defaultSettings.navTheme,
				// 主色调
				primaryColor: defaultSettings.primaryColor,
				fixedHeader: defaultSettings.fixedHeader,
				fixSiderbar: defaultSettings.fixSiderbar,
				colorWeak: defaultSettings.colorWeak,

				hideHintAlert: false,
				hideCopyButton: false,
				selectedKeys: [],
			},
			// 媒体查询
			query: {},

			// 是否手机模式
			isMobile: false,
			taskNum: 0,
      role:'',
			dropText:'',
		}
	},
	computed: {
		...mapState({
			// 动态主路由
			mainMenu: (state) => state.permission.addRouters,
		}),
		isTokenLogin() {
			const token = localStorage.getItem('token')
			console.log('token', token)
			return !!token // 假设 Token 存在并且有效
		},
		keys() {
			let matched = this.$route.matched
			let key = ''
			this.menus.forEach((e) => {
				if (matched[1].path == e.path) {
					key = e.path
				}
			})
			this.selectedKeys = [key]
			return key
		},
	},
	async created() {
		const { data } = await taskListNew({
			page: 1,
			pageSize: 1,
			types: 1,
		});
		this.taskNum = data.Total

		const routes = this.mainMenu.find((item) => item.path === '/')
		this.menus = (routes && routes.children) || []
		// 处理侧栏收起状态
		this.$watch('collapsed', () => {
			this.$store.commit(SIDEBAR_TYPE, this.collapsed)
		})
		this.$watch('isMobile', () => {
			this.$store.commit(TOGGLE_MOBILE_TYPE, this.isMobile)
		})
	},
	async mounted() {
		const userAgent = navigator.userAgent
		if (userAgent.indexOf('Edge') > -1) {
			this.$nextTick(() => {
				this.collapsed = !this.collapsed
				setTimeout(() => {
					this.collapsed = !this.collapsed
				}, 16)
			})
		}
		// console.log(this.$route.path);
		this.collapsed = localStorage.getItem('collapsed')
		
		// first update color
		// TIPS: THEME COLOR HANDLER!! PLEASE CHECK THAT!!
		if (
			process.env.NODE_ENV !== 'production' ||
			process.env.VUE_APP_PREVIEW === 'true'
		) {
			// updateTheme(this.settings.primaryColor)
		}

		const { data } = await getUserInfo();
    this.role = data.role;
		console.log(this.role,'我是role');
		// 发生产
		// if (this.role.includes('35') || this.role.includes('1')) {
		// 	this.$router.push('/DashBoard')
		// }else 
		if (this.role.includes('36') || this.role.includes('223')) {
			this.$router.push('/dcoPortal');
		}else if (this.role.length === 1 && this.role[0] === '195') {
			this.$router.push('/');
		}

	},

	methods: {
		i18nRender,
		async menuClick({ key }) {
			// 获取到当前的key,并且跳转
			this.$router.push({
				path: key,
			})
			this.selectedKeys = key

			if (key == '/') {
				this.dropText = this.$t('menu.Portal1'),
				this.$bus.$emit('getDropText',this.dropText)
			}else if (key == '/DashBoard') {
				this.dropText = this.$t('menu.DashBoard'),
				this.$bus.$emit('getDropText',this.dropText)
			}else if (key == '/dcoPortal') {
				this.dropText = this.$t('menu.dcoPortal'),
				this.$bus.$emit('getDropText',this.dropText)
			}
			
			const { data } = await taskListNew({
				page: 1,
				pageSize: 1,
				types: 1,
			});
			this.taskNum = data.Total
			// console.log('我是小红点', this.taskNum);
		},
		handleMediaQuery(val) {
			this.query = val
			if (this.isMobile && !val['screen-xs']) {
				this.isMobile = false
				return
			}
			if (!this.isMobile && val['screen-xs']) {
				this.isMobile = true
				this.collapsed = false
				this.settings.contentWidth = CONTENT_WIDTH_TYPE.Fluid
				// this.settings.fixSiderbar = false
			}
		},
		handleCollapse(val) {
			this.collapsed = val
		},
		handleSettingChange({ type, value }) {
			// console.log('type', type, value)
			type && (this.settings[type] = value)
			switch (type) {
				case 'contentWidth':
					this.settings[type] = value
					break
				case 'layout':
					if (value === 'sidemenu') {
						this.settings.contentWidth = CONTENT_WIDTH_TYPE.Fluid
					} else {
						this.settings.fixSiderbar = false
						this.settings.contentWidth = CONTENT_WIDTH_TYPE.Fixed
					}
					break
			}
		},
	},
}
</script>

<style lang="less">
@import './BasicLayout.less';
.ant-badge-dot {
	right: -9px !important;
	top: 4px !important;
}
</style>
